/* 项目统计 */
<template>
  <div>
<Tabs type="card" closable @on-tab-remove="handleTabRemove">
        <TabPane label="项目统计">
            <div style="background:#eee;padding: 20px">
                <Card :bordered="false">
                    <p slot="title">项目统计</p>
                    <p>
                      <!-- 选项 -->
                      <Row :gutter="16">
                        <Col span="2">
                            <Select  clearable style="width:100%" placeholder="选择账号">
                                  <Option v-for="item in cityList" :value="item.value"  :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </Col>
                        <Col span="2">
                            <Select  clearable style="width:100%" placeholder="选择账号">
                                  <Option v-for="item in cityList" :value="item.value"  :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </Col>
                        <Col span="2">
                            <Select  clearable style="width:100%" placeholder="选择账号">
                                  <Option v-for="item in cityList" :value="item.value"  :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </Col>
                        <Col span="2">
                            <Select  clearable style="width:100%" placeholder="选择账号">
                                  <Option v-for="item in cityList" :value="item.value"  :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </Col>
                        <Col span="2">
                            <Select  clearable style="width:100%" placeholder="选择账号">
                                  <Option v-for="item in cityList" :value="item.value"  :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </Col>
                        <Col span="2">
                            <Select  clearable style="width:100%" placeholder="选择账号">
                                  <Option v-for="item in cityList" :value="item.value"  :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </Col>
                        <Col span="1">
                            <Button type="primary">查看</Button>
                        </Col>
                      </Row>
                       <!-- 总计表格 -->
                      <Row style="padding:10px 0">
                        <Col span="5">
                          <div class="boder">
                            统计
                          </div>
                        </Col>
                        <Col span="5">
                          <div class="boder">
                            项目200个
                          </div>
                        </Col>
                        <Col span="5">
                          <div class="boder">
                            报告书120个&nbsp;报告表100个
                          </div>
                        </Col>
                      </Row>
                      <!-- 表格 -->
                      <Row>
                        <Col>
                           <Table height=370 border :columns="columns1" :data="data1"></Table>
                        </Col>
                      </Row>
                        <Row type="flex" justify="end">
                          <Col>
                             <Page :total="100" show-total />
                          </Col>
                        </Row>

                    </p>
                </Card>
                 <Tabs size="small">
                    <TabPane label="饼状图">
                      <Row>
                        <Col>
                          <div id="myChartB" :style="{width: '85%', height: '300px'}"></div>
                        </Col>
                      </Row>
                    </TabPane>
                    <TabPane label="柱状图">
                      <Row>
                        <Col>
                          <div id="myChartZhu" :style="{width: '85%', height: '300px'}"></div>
                        </Col>
                      </Row>
                    </TabPane>
                    <TabPane label="折线图">
                      <Row>
                        <Col>
                           <div id="myChartZ" :style="{width: '85%', height: '300px'}"></div>
                        </Col>
                      </Row>
                    </TabPane>
                </Tabs>
            </div>
        </TabPane>
    </Tabs>
  </div>
</template>

<script>
  export default {
  data() {
    return {
      cityList: [
        {
          value: "New York",
          label: "New York"
        },
        {
          value: "London",
          label: "London"
        },
        {
          value: "Sydney",
          label: "Sydney"
        },
        {
          value: "Ottawa",
          label: "Ottawa"
        },
        {
          value: "Paris",
          label: "Paris"
        },
        {
          value: "Canberra",
          label: "Canberra"
        }
      ],
      columns1:[
        {title:"序号",key:'num',width:50},
        {title:"机构名称",key:'institutions',width:150},
        {title:"创建时间",key:'time',width:150},
        {title:"地区",key:'adress'},
        {title:"总项目数",key:'itmeNum',width:95},
        {title:"报告书",key:'report',width:95},
      ],
      data1:[
       { num:"1",institutions:"某某某",itmeNum:"22",report:"15"},
       { num:"1",institutions:"某某某",itmeNum:"22",report:"15"},
       { num:"1",institutions:"某某某",itmeNum:"22",report:"15"},
       { num:"1",institutions:"某某某",itmeNum:"22",report:"15"},
       { num:"1",institutions:"某某某",itmeNum:"22",report:"15"},
       { num:"1",institutions:"某某某",itmeNum:"22",report:"15"},
       { num:"1",institutions:"某某某",itmeNum:"22",report:"15"},
      ]
    };
  },

  mounted(){
    this.drawLine();
  },
  methods: {
    handleTabRemove(name) {
      this["tab" + name] = false;
    },
     drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChartZ = this.$echarts.init(
        document.getElementById("myChartZ"),
        "light"
      );
       let myChartZhu = this.$echarts.init(
         document.getElementById('myChartZhu')

       );
       let myChartB = this.$echarts.init(
         document.getElementById('myChartB')

       );
      // 绘制图表
       myChartB.setOption({
         title : {
           text: 'xxxxxxxx',
           subtext: '纯属虚构',
           x:'center'
         },
         tooltip : {

         },
         legend: {
           orient : 'vertical',
           x : 'left',
           data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
         },
         toolbox: {
           show : false,
           feature : {
             mark : {show: true},
             dataView : {show: true, readOnly: false},
             magicType : {
               show: true,
               type: ['pie', 'funnel'],
               option: {
                 funnel: {
                   x: '25%',
                   width: '50%',
                   funnelAlign: 'left',
                   max: 1548
                 }
               }
             },
             restore : {show: true},
             saveAsImage : {show: true}
           }
         },
         calculable : true,
         series : [
           {
             name:'访问来源',
             type:'pie',
             radius : '55%',
             center: ['50%', '60%'],
             data:[
               {value:335, name:'直接访问'},
               {value:310, name:'邮件营销'},
               {value:234, name:'联盟广告'},
               {value:135, name:'视频广告'},
               {value:1548, name:'搜索引擎'}
             ]
           }
         ]
       });
       myChartZhu.setOption({
       /*  title: {
         text: 'ECharts 入门示例'
       },*/
       tooltip: {},
       legend: {
         data:['销量']
       },
       xAxis: {
         data: ['09.01', '09.02', '09.03', '09.04', '09.05', '09.06', '09.07']
       },
       yAxis: {},
       series: [{
         name: '销量',
         type: 'bar',
         data: [2, 1, 1, 1, 1, 3, 6]
       }]
       });
      myChartZ.setOption({
        xAxis: {
        type: 'category',
        data: ['09.01', '09.02', '09.03', '09.04', '09.05', '09.06', '09.07']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [2, 1, 1, 1, 1, 3, 6],
            type: 'line',
            smooth: true
        }]
      });
    },
  }
};
</script>

<style scoped>

</style>
